<!-- 报修 -->
<div class="repair">
  <p class="caption">报修</p>
  <div class="table-operations">
    <button class="btn-normol" (click)="getAllDevice()">全部</button>
    <button class="btn-normol" (click)="getRepairListFilter(1)">申请中</button>
    <button class="btn-normol" (click)="getRepairListFilter(2)">维修中</button>
    <button class="btn-normol" (click)="getRepairListFilter(3)">已维修</button>
    <button class="btn-normol" (click)="repairApply()">报修</button>
  </div>
  <nz-table #filterTable
    nzTableLayout="fixed"
    class="pay-table"
    [nzBordered]="true"
    [nzFrontPagination]="true"
    [nzScroll]="{ y: '45rem' }"
  >
    <thead>
      <tr>
        <th>报修设备名称</th>
        <th>报修类型</th>
        <th>报修客户编号</th>
        <th>报修原因</th>
        <th>审核状态</th>
        <th>是否撤回</th>
        <th>申请日期</th>
        <th>操作</th>
      </tr>
    <tbody>
      <tr *ngFor="let data of repairListFilter">
        <td>{{ data.DeviceName}}</td>
        <td>租客</td>
        <td>{{customerId}}</td>
        <td [nzEllipsis]="true">
          <span nz-tooltip [nzTooltipTitle]="data.Description">{{ data.Description }}</span>
        </td>
        <td>{{ data.State===1 ? '申请中' : data.State===2 ? '维修中' : '已维修' }}</td>
        <td>{{ data.IsWithdraw===-1 ? '否' : '是' }}</td>
        <td>{{ formatTime(data.CreateDate) }}</td>
        <td>
          <button class="btn-normol btn-cancel" *ngIf="data.State===1 && data.IsWithdraw===-1" (click)="cancelRepairApply(data.Id)">撤回</button>
          <span *ngIf="data.State===3 || data.IsWithdraw!==-1">-</span>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <!-- 撤销弹窗 -->
  <nz-modal
   [(nzVisible)]="recallModel"
   nzTitle="撤销申请"
   (nzOnOk)="handleOk()"
   (nzOnCancel)="handleCancel()"
   >
    <ng-container *nzModalContent>
      <p style="font-size: 4rem; text-align: center">请确定是否撤回申请</p>
    </ng-container>
  </nz-modal>
  <!-- 报修弹窗 -->
  <nz-modal
   [(nzVisible)]="repairModel"
   nzTitle="设备报修申请"
   (nzOnOk)="handleOkRepair()"
   (nzOnCancel)="handleCancelRepair()"
   (nzAfterOpen)="handleOpen()"
   (nzAfterClose)="close()"
   >
    <ng-container *nzModalContent>
      <form nz-form>
        <nz-form-item>
          <nz-form-label nzSpan="4" nzRequired>设备状态</nz-form-label>
          <nz-form-control nzSpan="14">
            <nz-select [(ngModel)]="deviceState" name="deviceState">
              <nz-option [nzValue]="-1" [nzLabel]="'未启用'"></nz-option>
              <nz-option [nzValue]="1" [nzLabel]="'启用'"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzSpan="4" nzRequired>设备类型</nz-form-label>
          <nz-form-control nzSpan="14">
            <nz-select [(ngModel)]="deviceId" name="deviceId">
              <nz-option *ngFor="let item of deviceList" [nzValue]="item.Id" [nzLabel]="item.Name"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzSpan="4" nzRequired>报修原因</nz-form-label>
          <nz-form-control nzSpan="14">
            <nz-textarea-count [nzMaxCharacterCount]="100">
              <textarea rows="4" [(ngModel)]="description" name="description" nz-input></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>
      </form>
    </ng-container>
  </nz-modal>
</div>

